<%--
  Created by IntelliJ IDEA.
  User: HUAWEI
  Date: 2023/9/13
  Time: 10:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>考勤列表</title>
    <script src="../static/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="../static/js/Core_values.js"></script>

    <style>
        .el-pagination {
            text-align: right;
            margin-top: 20px;
        }

        .el-input {
            width: 150px;
        }


    </style>
</head>
<body>
<script src="../static/js/flower.js"></script>

<div id="tab" style="height: 100%">
    <div class="demo-input-size">
        <el-input v-model="userName" placeholder="姓名">
        </el-input>
        <el-input type="date" v-model="clockDate" placeholder="日期">
        </el-input>
        <el-button type="primary" @click="search()" icon="el-icon-search">搜索</el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <%--        <shiro:hasAnyRoles name="admin,manager">--%>
        <el-button type="success" @click="openDialogAdd" icon="el-icon-plus">添加</el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <%--        </shiro:hasAnyRoles>--%>
        <%--        <shiro:hasAnyRoles name="admin,manager">--%>
        <el-button type="danger" icon="el-icon-delete" @click="deleteAttendances">批量删除</el-button>
        <%--        </shiro:hasAnyRoles>--%>
    </div>
    <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="selectChange"
    >
        <el-table-column
                type="selection"
                width="50">
        </el-table-column>
        <el-table-column
                prop="userName"
                label="姓名"
                width="160">
        </el-table-column>
        <el-table-column
                prop="clockDate"
                label="日期"
                width="160">
        </el-table-column>
        <el-table-column
                prop="mornSignIn"
                label="早上上班打卡情况"
                width="170">
        </el-table-column>
        <el-table-column
                prop="mornSignOut"
                label="中午下班打卡情况"
                width="170">
        </el-table-column>
        <el-table-column
                prop="afterSignIn"
                label="中午上班打卡情况"
                width="170">
        </el-table-column>
        <el-table-column
                prop="afterSignOut"
                label="下午下班打卡情况"
                width="170">
        </el-table-column>

        <el-table-column
                label="操作"
                width="160">
            <template slot-scope="scope">
                <el-button type="danger" size="small" @click="deleteOneByClockId(scope.row.clockId)">删除</el-button>
                <el-button type="info" @click="openDialogUpdate(scope.row)" size="small">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination @current-change="changeCurrentPage"
                   background
                   layout="prev, pager, next"
                   :total="totals"
                   :current-page="currentPage"
                   :page-size="pageSize"
    >
    </el-pagination>

    <div>
        <!-- 模态框，用作修改数据时做数据回显用 -->
        <el-dialog title="修改打卡情况" :visible.sync="dialogFormVisible">
            <el-form :model="updateform">
                <el-form-item label="早上上班打卡情况" :label-width="formLabelWidth">
                    <el-input v-model="updateform.mornSignIn" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="中午下班打卡情况" :label-width="formLabelWidth">
                    <el-input v-model="updateform.mornSignOut" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="中午上班打卡情况" :label-width="formLabelWidth">
                    <el-input v-model="updateform.afterSignIn" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="下午下班打卡情况" :label-width="formLabelWidth">
                    <el-input v-model="updateform.afterSignOut" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button @click="updateAttendance" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>

    <div>
        <!-- 模态框，用作添加数据 -->
        <el-dialog title="添加员工考勤" :visible.sync="dialogFormVisible1">
            <el-form :model="addform">
                <%--                <el-form-item label="姓名" @click="username">--%>
                <%--                    <el-select v-model="addform.userName" placeholder="请选择员工姓名">--%>
                <%--                        <el-option :label="u.name" :value="u.id" v-for="u in names" :key="u.id"></el-option>--%>
                <%--                    </el-select>--%>
                <%--                </el-form-item>--%>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="addform.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-input v-model="addform.clockDate" autocomplete="off" type="date"></el-input>
                </el-form-item>
                <el-form-item label="早上上班打卡情况" :label-width="formLabelWidth">
                    <el-input v-model="addform.mornSignIn" autocomplete="off"></el-input>
                </el-form-item>
                <%--                <el-form-item label="早上上班打卡情况">--%>
                <%--                    <el-select v-model="addform.mornSignIn" placeholder="请选择打卡状态">--%>
                <%--                        <el-option :label="s.statu" :value="s.id" v-for="s in status"></el-option>--%>
                <%--                    </el-select>--%>
                <%--                </el-form-item>--%>
                <el-form-item label="中午下班打卡情况" :label-width="formLabelWidth">
                    <el-input v-model="addform.mornSignOut" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="中午上班打卡情况" :label-width="formLabelWidth">
                    <el-input v-model="addform.afterSignIn" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="下午下班打卡情况" :label-width="formLabelWidth">
                    <el-input v-model="addform.afterSignOut" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button @click="addAttendance" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#tab",
        data:{
            tableData:[],
            totals:0,
            currentPage:1,
            pageSize:5,
            userName:"",
            clockDate:"",
            ids:[],
            dialogFormVisible:false,
            dialogFormVisible1:false,
            updateform:{
                mornSignIn:"",
                mornSignOut:"",
                afterSignIn:"",
                afterSignOut:"",
                clockId:""
            },
            addform:{
                userName:"",
                clockDate:"",
                mornSignIn:"",
                mornSignOut:"",
                afterSignIn:"",
                afterSignOut:"",
            },
            formLabelWidth: '150px',
        },
        methods:{
            queryAttendance(){
                var v=this
                $.ajax({
                    url:"../api/attendance",
                    type:"GET",
                    dataType:"json",
                    data:{"userName":v.userName,"clockDate":v.clockDate,"currentPage":v.currentPage,"pageSize":v.pageSize},
                    success:function (res) {
                        if (res.status==200){
                            v.tableData=res.object.tableDatas
                            v.totals=res.object.totals
                        }
                    },
                    error:function () {
                        v.$message.error("服务器出错！")
                    }
                })
            },
            search(){
                this.queryAttendance()
            },
            //newCurrentPage:最新的当前页码
            changeCurrentPage(newCurrentPage){
                this.currentPage=newCurrentPage
                this.queryAttendance()
            },
            deleteOneByClockId(clockId){
                var v=this
                v.$confirm('是否确定删除该数据','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type: 'warning'
                }).then(()=>{
                    $.ajax({
                        url:"../api/attendance/"+clockId,
                        type:"DELETE",
                        dataType: "json",
                        success:function (res) {
                            //当删除成功之后刷新页面,重新查询一次
                            if (res.status==200){
                                v.$message.success("删除成功！")
                                //删除成功之后重新从第一页开始查询
                                v.currentPage=1
                                //删除成功之后重新查询
                                v.queryAttendance()
                            }else if (res.status==403){
                                v.$message.warning(res.message)
                            }
                        },
                        error:function () {
                            v.$message.error("删除失败！")
                        }
                    })
                })
            },
            //点击编辑，打开模态框
            openDialogUpdate(attendance){
                var v=this
                v.updateform.mornSignIn=attendance.mornSignIn
                v.updateform.mornSignOut=attendance.mornSignOut
                v.updateform.afterSignIn=attendance.afterSignIn
                v.updateform.afterSignOut=attendance.afterSignOut
                v.updateform.clockId=attendance.clockId
                v.dialogFormVisible=true
            },
            updateAttendance(){
                var v=this
                $.ajax({
                    url:"../api/attendance",
                    type:"PUT",
                    dataType:"json",
                    contentType:"application/json",
                    data:JSON.stringify(v.updateform),
                    success:function (res) {
                        if (res.status==200){
                            v.dialogFormVisible=false
                            v.$message.success(res.message)
                            //刷新
                            v.queryAttendance()
                        }
                    },
                    error:function () {
                        v.$message.error("修改失败！")
                    }
                })
            },
            openDialogAdd(attendance){
                var v=this
                v.dialogFormVisible1=true
            },
            addAttendance(){
                var v=this
                $.ajax({
                    url:"../api/attendance",
                    type:"POST",
                    dataType:"json",
                    contentType:"application/json",
                    data:JSON.stringify(v.addform),
                    success:function (res) {
                        if (res.status==200){
                            v.dialogFormVisible1=false
                            v.$message.success(res.message)
                            v.currentPage=1
                            //刷新
                            v.queryAttendance()
                        }
                    },
                    error:function () {
                        v.$message.error("添加失败！")
                    }
                })
            },
            //获取选中的id值
            selectChange(selection){
                var v=this
                var clockIds=new Array(selection.length)
                for (var i=0;i<selection.length;i++){
                    clockIds[i]=selection[i].clockId
                }
                v.ids=clockIds
            },
            deleteAttendances(){
                var v=this
                v.$confirm('是否确定删除该数据','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type: 'warning'
                }).then(()=>{
                    $.ajax({
                        url:"../api/attendances/"+v.ids,
                        type:"DELETE",
                        dataType: "json",
                        // data:{"clockIds":v.ids},
                        success:function (res) {
                            //当删除成功之后刷新页面,重新查询一次
                            if (res.status==200){
                                v.$message.success("删除成功！")
                                //删除成功之后重新从第一页开始查询
                                v.currentPage=1
                                //删除成功之后重新查询
                                v.queryAttendance()
                            }else if (res.status==403){
                                v.$message.warning(res.message)
                            }
                        },
                        error:function () {
                            v.$message.error("删除失败！")
                        }
                    })
                })
            },
        },
        mounted(){
            this.queryAttendance()
        }
    })
</script>
</html>
